<template>
  <div class="gameAdIndex">
    <div class="selDivCommon">
      <div class="searchInput">
        <div class="common-searchDown">
          <div class="search">
            <input style="border-left: 1px solid #E0E0E0;
                  border-top-left-radius: 4px;
                  border-bottom-left-radius: 4px;"
                   type="text" placeholder="请输入操作内容" v-model="params.adName"
                   @input="params.adName=params.adName.trim()">
          </div>
        </div>
        <!--<Select v-model="params.logType" filterable clearable placeholder="请选择操作模块" size="large">-->
          <!--<Option v-for="item in logType" :value="item.value" :key="item.value">{{ item.name }}</Option>-->
        <!--</Select>-->
        <div class="common-btn" @click="lookFun">查询</div>
      </div>
    </div>

    <div class="mainTable">
      <el-table
        :data="tableData"
        height="100%"
        style="width: 100%">
        <el-table-column
          v-for="item in tableColumn"
          :key="item.label"
          :label="item.label"
          :prop="item.prop"
          :min-width="item.width?item.width:150">
          <template slot-scope="scope">
            <div class="text text-ellipsis" v-w-title="scope.row[item.prop]">
              {{scope.row[item.prop]}}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <Page
        v-if="tableData.length > 0"
        :total="totalRow"
        :current="params.pageNo"
        :page-size="params.pageSize"
        :page-size-opts="[10, 20, 50, 100]"
        @on-page-size-change="handleSizeChange"
        @on-change="handleCurrentChange"
        size="small" show-elevator show-sizer show-total>
      </Page>
    </div>
  </div>
</template>

<script>
  import enums from '@/assets/js/enums'
  import utils from '@/api/utils'
  export default {
    name: 'gameAdIndex',
    data () {
      return {
        params: {
          adName: '',
          pageNo: 1,
          pageSize: 10
        },
        params2: {
          adName: '',
          pageNo: 1,
          pageSize: 10
        },
        tableColumn: [
          {prop: 'adName', label: '广告名称', width: 180},
          {prop: 'gameId', label: '广告ID', width: 120},
          {prop: 'gameLogo', label: '广告LOGO', width: 120},
          {prop: 'platformTypeText', label: '平台类型', width: 250},
          {prop: 'openWay', label: '打开方式', width: 180},
          {prop: 'gmtUpdate', label: '更新时间', width: 180},
        ],
        tableData: [],
        // 总条数
        totalRow: 0,
      }
    },
    created () {
      this.mainTable();
    },
    methods: {
      // 主表
      mainTable (search) {
        let self = this;
        if (search) {
          this.params.pageNo = 1;
          this.params2 = JSON.parse(JSON.stringify(this.params));
        } else {
          this.params2.pageNo = this.params.pageNo;
          this.params2.pageSize = this.params.pageSize;
        }
        self.$Axios.post('game/ad/listAdByPage',
          {query: JSON.stringify(utils.objDeleteNull(self.params2))})
          .then(function (res) {
            if (res.data.success) {
              res.data.data.forEach((item) => {
                item.gmtUpdate = utils.formatUnixtimestamp(item.gmtUpdate);
              });
              self.tableData = res.data.data;
              self.totalRow = res.data.totalRow;
            }
          })
          .catch(function (res) {
            console.log(res)
          })
      },
      // 查询
      lookFun(){
        this.mainTable(true);
      },
      handleSizeChange (val) {
        this.params.pageSize = val;
        this.mainTable()
      },
      handleCurrentChange (val) {
        this.params.pageNo = val;
        this.mainTable()
      },
    }
  }
</script>

<style lang="scss">
  .gameAdIndex {
    height: 100%;
    padding: 15px 28px 20px 32px;
    .mainTable {
      height: calc(100% - 150px);
    }
  }
  .el-message-box__content {
    padding: 30px;
    overflow: auto;
  }

  .ql-align-right {
    text-align: right;
  }

  .ql-align-left {
    text-align: left;
  }

  .ql-align-center {
    text-align: center;
  }
</style>
